import React,{useEffect,useState} from 'react';
import {Link,useLocation} from 'react-router-dom';
import {Menu} from 'antd';

import {items} from '../../config/menuListConfig';
import './index.less';
import logo from '../../assets/logo.png';

/**
 * 二级路由 左侧导航
 */
function LeftNav(){
  const location = useLocation();
  //获取当前选中的路由路径
  const path = location.pathname;

  // 存储刷新页面默认打开的菜单导航 默认展开的菜单项
  const [openKeys,setOpenKeys] = useState([]);
  // 只展开当前父级菜单
  const [rootSubmenuKeys,setRootSubmenuKeys] = useState([]);

  /**
   * 点击展开菜单的回调函数
   * @param openKeys 当前展开的菜单数组
   */
  function onOpenChange(openKeys){
    // 判断菜单数组中是否有key
    const latestOpenKey = openKeys.find(function(key){
      return openKeys !== key;
    });
    // 判断需要展开的菜单是否已经存入
    if(rootSubmenuKeys !== latestOpenKey){
      setOpenKeys(openKeys);
    }else{
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  }

  /**
   * 遍历菜单导航数组
   * 获取默认展开的菜单项和默认展开的菜单项的父级菜单
   * @param items
   */
  function getOpenKeys(items){
    // 查找一个与当前请求路径匹配的子Item
    items.map(function(item){
      if(item.children){
        setRootSubmenuKeys([item.key]);
        const cItem = item.children.find(function(cItem){
          return path === cItem.key;
        });
        // 如果存在, 说明当前item的子列表需要打开
        if(cItem){
          setOpenKeys([item.key]);
        }
        //递归 重新判断孩子的孩子是否存在
        return getOpenKeys(item.children);
      }
    });
  }

  // 在页面初始化时调用一次
  useEffect(function(){
    getOpenKeys(items);
  },[]);


  return (
    <div className="left-nav">
      <Link className="left-header" to='home'>
        <img src={logo} alt="logo"/>
        <h1>谷粒后台</h1>
      </Link>
      <section className="left-section">
        {/*左侧菜单导航*/}
        <Menu
          // defaultSelectedKeys={[path]} //defaultSelectedKeys只能默认匹配一次
          // selectedKeys代替defaultSelectedKeys 实现动态选中
          selectedKeys={[path]}
          // 初始化加载一次需要默认打开的菜单项
          // defaultOpenKeys={openKeys}
          // 动态加载菜单项的展开和关闭
          openKeys={openKeys}
          // 配合 openKeys 控制菜单项的展开和关闭
          onOpenChange={onOpenChange}
          mode="inline"
          theme="dark"
          items={items}
        />
      </section>
    </div>
  );
}

export default LeftNav;